import React, { useEffect } from 'react';
import * as echarts from 'echarts';

interface Props {}

function Echarts(props:Props) {

  var myChart:any = null

  // 实例化echarts
  useEffect(()=>{
    myChart =  echarts.init(document.getElementById('charts') || document.body);
    draw()    // 绘图
  },[])

  // 绘图
  var draw =()=>{
    // 绘制图表
    myChart.setOption({
      tooltip: {},
      series: [
        {
          name: "Access From",
          type: 'pie',
          data: [
            {
              value: 100,
              name: '星期一'
            },
            {
              value: 200,
              name: '星期二'
            },
            {
              value: 300,
              name: '星期三'
            },
            {
              value: 400,
              name: '星期四'
            },
            {
              value: 500,
              name: '星期五'
            }
          ],
          roseType: 'area'
        }
      ]
    });
  }

  return (
    <div className='echarts'>
      <div id='charts' style={{width:680,height:350}}></div>
    </div>
  );
}

export default Echarts;